<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>王者荣耀</title>
    <link rel="stylesheet" href="css/index.css">
    <link rel="stylesheet" href="css/swiper-bundle.min.css">
</head>
<body>
    <!-- 头部模块 -->
    <header class="top">
        <div class="logo"></div>
        <div class="search">
            <input type="text"  placeholder="貂蝉/法师" >
            <span class="search-text"></span>
        </div>
        <div class="login">
            <a href="#">
                <span class="login-icon"></span>
                <span class="login-text">登陆账号</span>
            </a>
        </div>
    </header>
    <!-- 头部结束 -->
    <!-- banner模块 -->
        <div class="banner bx">
            <div class="banner-pic">
                <!-- Swiper -->
                <div class="swiper mySwiper">
                    <div class="swiper-wrapper">
                    <div class="swiper-slide"><img src="images/1.jpg" alt=""></div>
                    <div class="swiper-slide"><img src="images/3.jpg" alt=""></div>
                    <div class="swiper-slide"><img src="images/5.jpg" alt=""></div>
                    <div class="swiper-slide"><img src="images/4.jpg" alt=""></div>
                    <div class="swiper-slide"><img src="images/7.jpg" alt=""></div>
                    <div class="swiper-slide"><img src="images/6.jpg" alt=""></div>
                    </div>
                    <div class="swiper-button-next"></div>
                    <div class="swiper-button-prev"></div>
                    <div class="swiper-pagination"></div>
                </div>
                <!-- swiper  -->
            </div>
        </div>
    <!-- 右侧固定定位 -->
    <div class="fix"></div>
    <script src="js/swiper-bundle.min.js"></script>
    <!-- Initialize Swiper -->
    <script>
        var swiper = new Swiper(".mySwiper", {
            spaceBetween: 30,
            centeredSlides: true,
            autoplay: {
            delay: 2500,
            disableOnInteraction: false,
            },
            pagination: {
            el: ".swiper-pagination",
            clickable: true,
            },
            navigation: {
            nextEl: ".swiper-button-next",
            prevEl: ".swiper-button-prev",
            },
        });
    </script>
    <!-- banner结束 -->
    <!-- 导航栏 -->
    <div class="nav bx">
        <div class="nav-item">
            <ul>
                <li class="nav-content">
                    <a href="#">英雄列表</a>
                </li>
                <li class="nav-content">
                    <a href="#">赛事活动</a>
                </li>
                <li class="nav-content">
                    <a href="#">王者商城</a>
                </li>
                <li class="nav-content">
                    <a href="#">战力查询</a>
                </li>
                <li class="nav-content">
                    <a href="#">点卷充值</a>
                </li>
                <li class="nav-content">
                    <a href="#">个人中心</a>
                </li>
            </ul>
        </div>
        <!-- main  -->
        <div class="dropdown">
           <div class="drop-hd">
               <h3>英雄/皮肤</h3>
               <a href="#">更多 >></a>
           </div>
           <div class="drop-bd"></div>
           <ul>
            <li class="role">
                <img src="upload/1.jpg" alt="">
                <span class="role-name">曜-云鹰飞将</span>
            </li>
            <li class="role">
                <img src="upload/2.jpg" alt="">
                <span class="role-name">马超-神威</span>
            </li>
            <li class="role">
                <img src="upload/8.jpg" alt="">
                <span class="role-name">瑶-遇见神鹿</span>
            </li>
            <li class="role">
                <img src="upload/10.jpg" alt="">
                <span class="role-name">张良-黄金白羊座</span>
            </li>
            <li class="role">
                <img src="upload/11.jpg" alt="">
                <span class="role-name">妲己-时之彼端</span>
            </li>
            <li class="role">
                <img src="upload/12.jpg" alt="">
                <span class="role-name">武则天-倪克斯神谕</span>
            </li>
            <li class="role">
                <img src="upload/13.jpg" alt="">
                <span class="role-name">高渐离-玩趣恶龙</span>
            </li>
            <li class="role">
                <img src="upload/14.jpg" alt="">
                <span class="role-name">小乔-丁香结</span>
            </li>
            <li class="role">
                <img src="upload/15.jpg" alt="">
                <span class="role-name">裴擒虎-天狼狩猎者</span>
            </li>
            <li class="role">
                <img src="upload/16.jpg" alt="">
                <span class="role-name">狄仁杰-鹰眼统帅</span>
            </li>
            <li class="role">
                <img src="upload/17.jpg" alt="">
                <span class="role-name">蔡文姬-奇迹圣诞</span>
            </li>
            <li class="role">
                <img src="upload/18.jpg" alt="">
                <span class="role-name">花木兰-FMVP</span>
            </li>
        </ul>
        </div>
        <!-- main-end  -->
    </div>
    <!-- 英雄新讯 -->
    <div class="ad bx">
        <div class="download">
            <a href="#"></a>
        </div>
        <div class="news">
            <div class="news-hd">
                英雄攻略
            </div>
            <div class="news-bd"></div>
            <ul>
                <li class="gl">
                    <a href="#">
                        <img src="upload/a.jpg" alt="">
                        <span class="mask"></span>
                    </a>
                </li>                <li class="gl">
                    <a href="#">
                        <img src="upload/a.jpg" alt="">
                        <span class="mask"></span>
                    </a>
                </li>
                <li class="gl">
                    <a href="#">
                        <img src="upload/a.jpg" alt="">
                        <span class="mask"></span>
                    </a>
                </li>
                <li class="gl">
                    <a href="#">
                        <img src="upload/a.jpg" alt="">
                        <span class="mask"></span>
                    </a>
                </li>
                <li class="gl">
                    <a href="#">
                        <img src="upload/a.jpg" alt="">
                        <span class="mask"></span>
                    </a>
                </li>
                <li class="gl">
                    <a href="#">
                        <img src="upload/a.jpg" alt="">
                        <span class="mask"></span>
                    </a>
                </li>
                <li class="gl">
                    <a href="#">
                        <img src="upload/a.jpg" alt="">
                        <span class="mask"></span>
                    </a>
                </li>
                <li class="gl">
                    <a href="#">
                        <img src="upload/a.jpg" alt="">
                        <span class="mask"></span>
                    </a>
                </li>
            </ul>
        </div>
    </div>
    <!-- footer -->
    <footer>
        <div class="bx">
            <div class="footer-icon">
                <p class="tencent"></p>
                <p class="timi"></p>
            </div>
            <div class="copyright">
            <p>腾讯互动娱乐timi
腾讯互动娱乐|服务条款|隐私保护指引|儿童隐私保护指引|腾讯游戏招聘|腾讯游戏客服|游戏列表|广告服务及商务合作
腾讯公司版权所有<br />
COPYRIGHT © 1998 - 2021 TENCENT. ALL RIGHTS RESERVED.<br />
深圳市市场监督管理局企业主体身份公示工商网监电子标识 |粤网文[2020]3396-195号|（署）网出证（粤）字第054号<br />
文网游备字[2016]M-CSG 0059 号<br />
文网游备字[2016]M-CSG 0059 号|新广出审[2017] 6712号|ISBN 978-7-7979-8408-9</p>
            </div>
        </div>
    </footer>
</body>
</html>